<template>
	<view class="index-box">
		
		<!--  顶部轮播图和搜索  -->
		<view class="top-swiper-box">
			<view class="search-top" :class="{'search-fixed':searchFixed}" id="searchIndex" :style="{'paddingBottom':StatusBar == 0 ? '20px' : StatusBar+'px'}">
				<view :style="{'height':StatusBar == 0 ? '20px' : StatusBar+'px'}"></view>
				<search-top @toSearch="goSearchPage"></search-top>
			</view>
			<view class="swiper-box">
				 <swiper :style="{'height':swiperHeight + 'px'}" previous-margin="50rpx" next-margin="50rpx" :circular="true" class="swiper" :indicator-dots="false" :autoplay="true" :current="bannerIndex" @change="bannerIndexChange">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<view class="swiper-view">
							<image class="swiper-img" mode="aspectFill" :src="item.advImg" :style="{'height':bannerIndex == index ? swiperHeight + 'px'  : (swiperHeight - 10) +'px'}" />
						</view>
					</swiper-item>
				</swiper>
				<view class="current-box">
					<view class="current" v-for="(item,index) in bannerList" :key="index" 
					:class="index > bannerIndex ? 'current-action' :''"></view>
				</view>
			</view>
		</view>
		<!--  顶部轮播图和搜索end  -->
		
		<!--  分类信息  -->
		<view class="cate-box">
			<view class="cate-item" v-for="(item,index) in cateList" :key="index" v-if="index<=10" @tap="cateSearch(item.text)">
				<image :src="item.img" class="cate-img" v-if="item.img && item.img.length>0" />
				<view v-else class="cate-gb">
					{{(item.text).substring(0,1)}}
				</view>
				<view class="cate-name">
					{{item.text}}
				</view>
			</view>
			<!-- <view class="cate-item" v-if="cateList.length>=9">
				<image src="~/assets/images/indexMore.png" class="cate-img" />
				<view class="cate-name">
					更多
				</view>
			</view> -->
		</view>
		<!--  分类信息end  -->
		
		
		<!--  图片广告  -->
		
		<view class="activity-box">
			<view class="activity-left">
				<image class="activity-img" src="../../static/index/kj.png" mode="scaleToFill"></image>
			</view>
			<view class="activity-right">
				<view class="activity-blick">
					<image class="activity-img" src="../../static/index/tg.png" mode="scaleToFill"></image>
				</view>
				<view class="activity-blick activity-blick2">
					<image class="activity-img" src="../../static/index/zk.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		
		<!--  图片广告end  -->
		
		
		<view class="like-title">
			<view class="like-icon-box">
				<text class="iconfont iconxihuancopy"></text>
			</view>
			<view class="text-box">
				<view class="link-text">猜你喜欢</view>
				<view class="link-sumb">Guess  You  Like  It</view>
			</view>
		</view>
		
		<!--  商品列表  -->
		<view class="index-goods-list">
			<view class="goods-flex" v-for="(item,index) in goodsList" :key="index">
				<index-goods-list :item="item"></index-goods-list>
			</view>
		</view>
		<!--  商品列表  -->
		
		<!--  返回顶部  -->
		<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
		
	</view>
</template>

<script>
	import searchTop from "@/components/search-top.vue"
	import indexGoodsList from "@/components/index-goods-list.vue"
	export default{
		name:"index",
		data(){
			return {
				/*  顶部标题栏高度  */
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				
				/*  搜索框的高度  */
				searchH:60,
				/*  搜索框是否固定在顶部  */
				searchFixed:false,
				
				/*   滚动距离  */
				scrollTop:0,
				
				/*  轮播图框的高度  */
				swiperHeight:'210',
				
				/*  轮播图当前显示的索引块  */
				bannerIndex:0,
				
				/*  分页数 和 分页大小   */
				pageNo: 1,
				pageSize: 10,
				
				/*  是否还有更多列表数据  */
				isMore:true,
				goodsList:[],
				
				/*  轮播图  */
				bannerList: [],
				
				/*  分类  */
				cateList:[],
				
			}
		},
		filters:{
			linearColor(index){
				
			},
		},
		methods:{
			
			/*  去搜索页面  */
			goSearchPage(){
				uni.navigateTo({
					url:"/pages/search/list"
				})
			},
			
			/*  点击分类搜索  */
			cateSearch(text){
				this.$store.commit("search/setSearchValue",text)
				uni.navigateTo({
					url:"/pages/search/list"
				}) 
			},
			
			
			/*  轮播图索引发生改变  */
			bannerIndexChange(e){
				this.bannerIndex = e.detail.current
			},
			
			/*  获取首页轮播图  */
			getBannerList(){
				this.$ajax("indexBanner",{positionWhere:"banner",versionWhere:"npc"},'get').then((res)=>{
					if(res.code>=0){
						let data = res.data
						if(data.length>8){
							data = data.splice(0,8)
						}
						this.bannerList = data
					}
				})
			},
			
			/*  0 是第一次获取或者刷新  1是滚动到底部  */
			getList(type){
				let data = {pageNo:this.pageNo,pageSize:this.pageSize}
				this.$ajax("indexGoodsList",data).then((res)=>{
					uni.stopPullDownRefresh()
					if(res.code>=0){
						if(type == 0){
							this.goodsList = res.data.list
						}else{
							this.goodsList = this.goodsList.concat(res.data.list)
						}
						if(res.data.list.length<this.pageSize){
							this.isMore = false
						}
					}
				}).catch((err)=>{
					uni.stopPullDownRefresh()
				})
			},
			
			/*  获取分类列表  */
			getCateList(){
				this.$ajax("indexCateList",{},'get').then((res)=>{
					if(res.code>=0){
						let data = res.data
						if(data.length>=10){
							data = data.splice(0,10)
						}
						
						this.cateList = data
					}
				})
			},
			
		},
		
		/*  下拉刷新  */
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
			this.pageNo = 1
			this.isMore = true
			let t = setTimeout(()=>{
				this.getList(0)
				clearTimeout(t)
			},500)
		},
		
		/*  滚动到底部  */
		onReachBottom(){
			if(this.isMore){
				this.pageNo = this.pageNo + 1
				this.getList(1)
			}
		},
		
		/*  页面滚动位置  */
		onPageScroll(e){
			this.scrollTop = e.scrollTop
			if(e.scrollTop > (this.searchH+20)){
				this.searchFixed = true
			}else{
				this.searchFixed = false
			}
		},
		
		onLoad() {
			let _this = this
			uni.getSystemInfo({
			    success: function (res) {
			        console.log(res.windowWidth);
					let ww = res.windowWidth >= 1024 ? 1024 : res.windowWidth
					_this.swiperHeight = ((ww - 60 ) * 0.562)
				}
			});
			this.getBannerList()
			this.getCateList()
			this.getList(0)
		},
		
		onReady() {
			let _this = this
			this.$nextTick(()=>{
				const query = uni.createSelectorQuery().in(this)
				query.select('#searchIndex').boundingClientRect((data) => {
					_this.searchH = data.height
				}).exec();
			})
		},
		
		
		components:{
			searchTop,indexGoodsList
		}
		
	}
</script>

<style scoped lang="scss" src="../../assets/css/index.scss">
	
</style>
